<template>
    <table-search 
        :current-page="table.page"
        :page-size="table.size"
        :total="table.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
        <template #search>
            <el-row
                :gutter="15"
                class="clear-both"
            >
                <el-col :span="24">
                    <card-list
                        title="高级搜索"
                        type="keyvalue"
                        :show-header="true"
                    >
                        <template #btn>
                            <el-button-group>
                                <el-button
                                    icon="el-icon-search"
                                    size="mini"
                                    @click="submit"
                                >
                                    搜索
                                </el-button>
                            </el-button-group>
                        </template>
                        <template #keyvalue>
                            <el-form
                                ref="refForm"
                                class="card-list-form"
                                :model="form"
                                :rules="rules"
                                size="mini"
                            >
                                <el-row :gutter="15">
                                    <card-list-item
                                        width="100px"
                                        prop="name"
                                    >
                                        <template #key>
                                            日期
                                        </template>
                                        <template #value>
                                            <el-date-picker
                                                v-model="form.date"
                                                type="daterange"
                                                range-separator="至"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                            />
                                        </template>
                                    </card-list-item>
                                    <card-list-item
                                        width="100px"
                                        prop="name"
                                    >
                                        <template #key>
                                            姓名
                                        </template>
                                        <template #value>
                                            <el-input
                                                v-model="form.name"
                                                placeholder="请输入姓名"
                                            />
                                        </template>
                                    </card-list-item>
                                    <card-list-item
                                        width="100px"
                                        prop="address"
                                    >
                                        <template #key>
                                            地址
                                        </template>
                                        <template #value>
                                            <el-input
                                                v-model="form.address"
                                                placeholder="请输入地址"
                                            />
                                        </template>
                                    </card-list-item>
                                    <card-list-item
                                        width="100px"
                                        prop="tag"
                                    >
                                        <template #key>
                                            标签
                                        </template>
                                        <template #value>
                                            <el-radio-group v-model="form.tag">
                                                <el-radio label="所有" />
                                                <el-radio label="家" />
                                                <el-radio label="学校" />
                                                <el-radio label="超市" />
                                                <el-radio label="公司" />
                                            </el-radio-group>
                                        </template>
                                    </card-list-item>
                                </el-row>
                            </el-form>
                        </template>
                    </card-list>
                </el-col>
            </el-row>
        </template>
        <el-table
            ref="filterTable"
            row-key="date"
            border
            :data="tableData.data"
            style="width: 100%;"
            :summary-method="getSummaries"
            show-summary
        >
            <el-table-column
                type="index"
                width="50"
                :index="indexMethod"
            />
            <el-table-column
                prop="date"
                label="日期"
                sortable
                width="180"
                column-key="date"
            />
            <el-table-column
                prop="name"
                label="姓名"
                width="180"
            />
            <el-table-column
                prop="address"
                label="地址"
            />
            <el-table-column
                prop="amt"
                label="金额"
            >
                <template #default="scope">
                    <el-input
                        v-model.number="scope.row.amt"
                        v-format:money="[scope.row, 'amt']"
                    />
                </template>
            </el-table-column>
            <el-table-column
                prop="tag"
                label="标签"
                width="100"
            >
                <template #default="scope">
                    <el-tag
                        :type="scope.row.tag === '家' ? 'primary' : (scope.row.tag === '公司' ? 'danger' : scope.row.tag === '超市' ? 'info' : 'success')"
                        disable-transitions
                    >
                        {{ scope.row.tag }}
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>
    </table-search>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import TableSearch from '/@/components/TableSearch.vue';
import CardList from '/@/components/CardList.vue';
import CardListItem from '/@/components/CardListItem.vue';
import { getTableList, ITag } from '/@/api/components/index';
import { format, tableSummaries } from '/@/utils/tools';
import { validate } from '/@/utils/formExtend';

interface ISearchForm {
    date: string
    name: string
    address: string
    tag: ITag
}
interface ITable {
    data : Array<unknown>
    total: number
    page: number
    size: number
}

// 键值对样式，及表单校验
const search = (table: ITable, form: ISearchForm) => {
    const rules = reactive({});
    const refForm = ref(null);
    const submit = async() => {
        if(!await validate(refForm)) return;
        table.page = 1;
        renderTableList(table, form);
    };
    return {
        rules,
        submit,
        refForm
    };
};

const renderTableList = async(table: ITable, form: ISearchForm) => {
    const d = await getTableList({ page: table.page, size: table.size, tag: form.tag });
    table.data = d.data.data.data;
    table.total = d.data.data.total;
};
const tableRender = (table: ITable, form: ISearchForm) => {
    renderTableList(table, form);
    const handleSizeChange = (v: number) => (table.size = v) && renderTableList(table, form);
    const handleCurrentChange = (v: number) => (table.page = v) && renderTableList(table, form);
    const indexMethod = (index: number) => (table.page - 1) * table.size + index + 1;
    const getSummaries = tableSummaries;
    return { table, handleSizeChange, handleCurrentChange, indexMethod, getSummaries };
};

export default defineComponent({
    name: 'table-search-test',
    components: {
        TableSearch,
        CardList,
        CardListItem
    },
    setup() {
        const form: ISearchForm = reactive({
            date: '',
            name: '',
            address: '',
            tag: '所有'
        });

        // const 
        const tableData: ITable = reactive({
            data : [],
            total: 0,
            page: 1,
            size: 10
        });
        return {
            form,
            tableData,
            format,
            ...tableRender(tableData, form),
            ...search(tableData, form)
        };
    }
});
</script>
